<template>
  <div class="container">
    <div class="topbox">
      <p class="titlep" >
        <svg-icon class="logoFp" icon-class="HBIS1" />
        <span>{{ platformName }}</span>
      </p>
    </div>
    <el-row style="display:flex;justify-content:center;align-items:center;">
      <el-col :xs="24" :sm="12" :md="12"
              :lg="12" :xl="12">
        <div class="body maxScreen">
          <span class="bodyTitle">当前用户初次登录，请修改密码</span>
          <el-form
            ref="forceUpdatePwForm"
            :model="form"
            :rules="forceUpdatePwRules"
            class="bodyForm"
            label-width="80px"
          >
            <el-form-item prop="tenantId" label="租户名称">
              <el-select ref="tenantId" v-model.trim="form.tenantId" name="tenantId"
                         style="width: 100%;" disabled>
                <el-option
                  v-for="item in selectList"
                  :key="item.tenantId"
                  :label="item.tenantName"
                  :value="item.tenantId"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="账号" prop="account">
              <el-input
                v-model="form.account"
                disabled
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item label="旧密码" prop="password">
              <el-input
                v-model="form.password"
                type="password"
                autocomplete="off"
                placeholder="请输入旧密码"
              />
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
              <el-input
                v-model="form.newPassword"
                type="password"
                autocomplete="off"
                placeholder="请输入新密码"
              />
            </el-form-item>
            <el-form-item label="重复密码" prop="repeatPassword">
              <el-input
                v-model="form.repeatPassword"
                type="password"
                autocomplete="off"
                placeholder="请再次输入新密码"
              />
            </el-form-item>
            <el-form-item style="text-align:center">
              <el-button type="primary" size="mini" :loading="isLoading"
                         @click="onSubmit">确定</el-button>
              <el-button size="mini" @click="onCancel">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getPwdRole } from '@/framework/api/userCenter/sysUser'
import { getTenantDropDownList, updatePwdNoToken } from '@/framework/api/user'
import { MessageBox } from 'element-ui'
import store from '@/store'
import { encryption } from 'DQBasic-vue-component'

export default {
  name: 'DtUpdatePw',
  data() {
    // 原始密码的校验规则
    const validatePassword = (rule, value, callback) => {
      if (!value) {
        callback('请输入旧密码')
      } else {
        callback()
      }
    }
    // 对新密码进行自定义验证
    const validateNewPwd = (rule, value, callback) => {
      if (!value) {
        callback('请输入新密码')
      } else if (this.pwdreg.test(value) === false) {
        callback(this.pwdregcon)
      } else {
        callback()
      }
    }
    // 确认密码校验
    const validateConfirmPwd = (rule, value, callback) => {
      if (!value) {
        callback('请再次输入新密码')
      } else if (value !== this.form.newPassword) {
        callback('两次密码输入不一致')
      } else {
        callback()
      }
    }
    return {
      isLoading: false,
      selectList: [],
      pwdreg: '',
      pwdregcon: '',
      form: {
        tenantId: this.$route.query.tenantId,
        account: this.$route.query.account,
        password: '',
        newPassword: '',
        repeatPassword: ''
      },
      forceUpdatePwRules: {
        account: [
          { required: true, message: '请输入账号', trigger: 'change' }
        ],
        password: [
          { required: true, validator: validatePassword, trigger: 'change' }
        ],
        newPassword: [
          { required: true, validator: validateNewPwd, trigger: 'change' }
        ],
        repeatPassword: [
          { required: true, validator: validateConfirmPwd, trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    platformName() {
      return this.$store.state.settings.platformName
    }
  },
  mounted() {
    this.getSelect()
    this.getPwdRole()
  },
  methods: {
    // 获取租户下拉框
    getSelect() {
      getTenantDropDownList().then((res) => {
        this.selectList = res.data
      })
    },
    // 获取密码策略
    getPwdRole() {
      getPwdRole({ tenantId: this.form.tenantId }).then((res) => {
        this.pwdrole = res.data
        this.pwdreg = new RegExp(this.pwdrole.pwdRegularExpression)
        this.pwdregcon = this.pwdrole.pwdRgDescribe
      })
    },
    onCancel() {
      this.resetForm('forceUpdatePwForm')
      this.$emit('cancel', false)
      this.$router.push('/login')
    },
    onSubmit() {
      this.$refs.forceUpdatePwForm.validate((valid) => {
        if (valid) {
          this.submit()
        } else {
          return false
        }
      })
    },
    submit() {
      const formPassword = encryption({
        data: this.form
      })
      this.isLoading = true
      updatePwdNoToken(formPassword).then((res) => {
        if (res.code === '00000') {
          this.isLoading = false
          this.$message({
            type: 'success',
            message: '修改成功'
          })
          MessageBox.alert('您的密码已修改，请重新登录。', '提示', {
            confirmButtonText: '确定',
            type: 'success'
          }).then(() => {
            store.dispatch('user/resetToken').then(() => {
              // location.reload()
              this.$router.push('/login')
            })
          }).catch(() => {
            store.dispatch('user/resetToken').then(() => {
              // location.reload()
              this.$router.push('/login')
            })
          })
        } else {
          this.isLoading = false
          this.$message({
            type: 'error',
            message: `修改失败:${res.message}`
          })
        }
      }).catch(() => {
        this.isLoading = false
      })
    }
  }
}
</script>
<style scoped lang="scss">
@import "~@/framework/styles/variables.scss";
.container{
  height: 100%;
  display: flex;
  flex-direction: column;
  background: url("../../../assets/fpImg.png") 0 0 no-repeat;
  background-size: cover;
//   margin-left:10px;
  background-color: #fff;
    .topbox {
        position: relative;
        z-index: 1;
        .titlep {
            position: absolute;
            // top: 20%;
            left: 2%;
            display: flex;
            align-items: center;
            .logoFp {
                width: 28px !important;
                height: 28px !important;
                max-height: 50px !important;
                margin-right: 6px;
            }
            span {
                font-size: 14px;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 500;
                line-height: 20px;
                color: #131414;
                opacity: 1;
            }
}
    }
    .body{
        position: relative;
        box-shadow: 0px 8px 24px 0px rgba(149,157,165,0.2);
        background: #ffffff;
        opacity: 1;
        border-radius: 4px;
        max-height: 600px;
        height: 95%;
        z-index: 9;
        padding-top: 48px;
        .bodyTitle{
            justify-content: center;
            display: flex;
            font-size: 28px;
            line-height: 39px;
            margin-bottom:56px
        }
        .bodyForm .el-form-item {
            width: 100%;
            justify-content: center;
            display: flex;
            align-items: center;
            margin-bottom: 30px;
        }
    }
}
@media only screen and (min-width: $screen-md){
  .maxScreen{
    box-shadow: 0px 10px 30px rgba(111, 141, 216, 0.1);
    margin: -100px auto;
   min-height: 575px;
  }
}
::v-deep .el-form-item__content{
  width: 276px;
  margin-left:0px !important;
}
::v-deep .el-row{
  flex:1;
    display: flex;
    justify-content: center;
}
</style>
